<template>
  <div class="controller">
    <label class="switch">
      <input
        type="checkbox"
        class="ipt"
        :checked="isChecked"
        @click="changeState"
      />
      <span class="slider" />
    </label>
  </div>
</template>

<script>
import { mapActions, mapState } from 'pinia'

import useStore from '@/store'
export default {
  name: 'SwitchRadio',
  computed: {
    ...mapState(useStore, ['isChecked'])
  },
  methods: {
    ...mapActions(useStore, ['changeChecked']),
    changeState() {
      this.changeChecked()
    }
  }
}
</script>

<style lang="scss" scoped>
.controller {
  position: absolute;
  top: 1.5%;
  left: 1.6%;
  z-index: 999;

  .switch {
    position: relative;
    display: inline-block;
    width: 1.8em;
    height: 1em;
    font-size: 14px;

    .ipt {
      width: 0;
      height: 0;
      opacity: 0;

      &:checked + .slider {
        background-color: rgb(14 252 255 / 50%);
        border: 1px solid rgb(14 252 255 / 50%);
      }

      &:focus + .slider {
        box-shadow: 0 0 1px rgb(14 252 255 / 50%);
      }

      &:checked + .slider::before {
        background-color: rgb(255 255 255 / 50%);
        transform: translateX(0.7em);
      }
    }

    .slider {
      position: absolute;
      inset: 0;
      cursor: pointer;
      background-color: rgb(255 255 255 / 50%);
      border: 1px solid rgb(173 181 189 / 50%);
      border-radius: 30px;
      transition: 0.4s;

      &::before {
        position: absolute;
        bottom: 0.11em;
        left: 0.13em;
        width: 0.7em;
        height: 0.7em;
        content: '';
        background-color: #adb5bd;
        border-radius: 10px;
        transition: 0.4s;
      }
    }
  }
}
</style>
